<script setup lang="ts" name="refund-manage">
import type { VxePagerEvents } from 'vxe-table'
import { useRoute, useRouter } from 'vue-router'
import UpdatedOss from '@fl/components/upLoad-oss.vue'
import { Editor } from '@fl/origin-components/Editor/index'
import { useDicts } from './hooks/use-dicts'

const router = useRouter()
const { getDictOptions } = useDicts()
const formRef = ref(null)
const formData = reactive({
    id: '',
    areaName: '',
    areaDistrictId: '',
    areaDistrictName: '',
    areaFocusDesc: '',
    areaDesc: '',
    areaCommentDesc: '',
    areaPlanDesc: '',
    areaSort: '',
    areaKeyLayoutDesc: '', // 重点产业布局
    url: '',
    img: '',
})
const rules = reactive<any>({
    areaName: [{ message: '请输入区域名称', required: true, trigger: 'blur' }],
    areaDistrictId: [
        { message: '请选择所属区域', required: true, trigger: 'change' },
    ],
    areaFocusDesc: [{ message: '请输入区域发展重点', required: true, trigger: 'blur' }],
    areaDesc: [{ message: '请输入排序', required: true, trigger: 'blur' }],
    areaCommentDesc: [{ message: '请输入区域点评', required: true, trigger: 'blur' }],
    areaPlanDesc: [{ message: '请输入区域规划', required: true, trigger: 'blur' }],
    areaSort: [{ message: '请输入', required: true, trigger: 'blur' }],
    areaKeyLayoutDesc: [{ message: '请输入重点产业布局', required: true, trigger: 'blur' }],
})
function cancel() {
    router.back()
}
function commit() {
    //   formRef.value?.validate((valid, fields) => {
    // if (valid) {
    //   if(formData.areaDistrictId){
    //     const area = districtTypes.value.find((item)=>{
    //       return item.areaCode === formData.areaDistrictId
    //     })
    //     if(area){
    //       formData.areaDistrictName = area.areaName
    //     }
    //   }
    //   if ( formData['id'] ){
    //     updateArea(formData).then((res)=>{
    //         if (res.code === 200) {
    //           ElMessage.success("操作成功")
    //           router.push(`/house-source-center/house-district/region-config`);
    //         }else{
    //           ElMessage.warning(res.msg)
    //         }
    //     })
    //   } else {
    //     formData["id"] = undefined
    //     createArea(formData).then((res)=>{
    //     if (res.code === 200) {
    //       ElMessage.success("操作成功")
    //       router.push(`/house-source-center/house-district/region-config`);
    //     }else{
    //       ElMessage.warning(res.msg)
    //     }
    //    })
    //   }
    //  }
    // })
}
</script>

<template>
    <ElCard class="mb-20">
        <ElForm ref="formRef"
                :model="formData"
                :rules="rules"
                label-width="120"
        >
            <ElRow>
                <ElCol :span="24">
                    <ElButton class="mb-20"
                              @click="cancel"
                    >
                        <ElIcon mr8
                                style="font-size: 19px"
                        >
                            <Back />
                        </ElIcon> 返回列表
                    </ElButton>
                </ElCol>
            </ElRow>

            <ElRow>
                <ElCol :span="10">
                    <ElFormItem label="标题"
                                prop="areaName"
                    >
                        <ElInput v-model="formData.areaName"
                                 placeholder="请输入标题名称"
                                 clearable
                        />
                    </ElFormItem>
                </ElCol>
            </ElRow>

            <ElRow>
                <ElCol :span="10">
                    <ElFormItem label="资讯类别"
                                prop="areaDistrictId"
                    >
                        <ElSelect v-model="formData.areaDistrictId"
                                  class="m-2"
                                  placeholder="请选择资讯类别"
                                  clearable
                        >
                            <ElOption v-for="(item, index) in getDictOptions('propertyType')"
                                      :key="index"
                                      :value="item.value"
                                      :label="item.label"
                            />
                        </ElSelect>
                    </ElFormItem>
                </ElCol>
            </ElRow>

            <ElRow>
                <ElCol :span="10">
                    <ElFormItem label="标签"
                                prop="areaName"
                    >
                        <ElInput v-model="formData.areaName"
                                 placeholder="请输入标题名称"
                                 clearable
                        />
                    </ElFormItem>
                </ElCol>
            </ElRow>

            <ElRow>
                <ElCol :span="10">
                    <ElFormItem label="地址"
                                prop="areaName"
                    >
                        <ElInput v-model="formData.areaName"
                                 placeholder="请输入标题名称"
                                 clearable
                        />
                    </ElFormItem>
                </ElCol>
            </ElRow>

            <ElRow>
                <ElCol :span="10">
                    <ElFormItem label="价格"
                                prop="areaName"
                    >
                        <ElInput v-model="formData.areaName"
                                 placeholder="请输入标题名称"
                                 clearable
                        />
                    </ElFormItem>
                </ElCol>
            </ElRow>

            <ElRow>
                <ElCol :span="12">
                    <ElFormItem label="封面"
                                prop="img"
                    >
                        <UpdatedOss v-model="formData.img"
                                    accept=".png,.jpg,.jpeg"
                        />
                    </ElFormItem>
                </ElCol>
            </ElRow>

            <ElRow>
                <ElCol :span="24">
                    <ElFormItem label="内容"
                                prop="areaCommentDesc"
                    >
                        <Editor v-model="formData.areaCommentDesc"
                                :is-jc-mall="false"
                                :height="200"
                                :exclude-keys="['group-image', 'group-video']"
                        />
                    </ElFormItem>
                </ElCol>
            </ElRow>

            <ElRow>
                <ElCol :span="24"
                       style="text-align: center;margin-top:40px"
                >
                    <ElButton @click="cancel">
                        取消
                    </ElButton>

                    <ElButton type="primary"
                              style="margin-left:20px"
                              @click="commit"
                    >
                        提交
                    </ElButton>
                </ElCol>
            </ElRow>
        </ElForm>
        <!-- <PlusForm v-model="form"
                  :columns="schema"
                  :row-props="{ gutter: 20 }"
                  label-width="80"
                  label-position="right"
        >
            <template #footer>
                <div class="ml-auto">
                    <ElButton type="primary"
                              @click="search"
                    >
                        查询
                    </ElButton>

                    <ElButton @click="reset">
                        重置
                    </ElButton>
                </div>
            </template>
        </PlusForm> -->
    </ElCard>
</template>

<style lang="less" scoped></style>
